<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出影片信息</title>
<style>
body{
font-family:微软雅黑}
img{
width:240px;
height:172px;}
.movie_name{padding-left:10px; font-size:18px; color: #333333; margin-top:8px;}
.movie_des{padding-left:10px; font-size:14px; color: #7a7a7a; margin-top:5px;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
  	<my-movie :img="imgUrl" :name="name" :description="description"></my-movie>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-movie', {
	props : ['img','name','description'],//传递动态Prop
	template : '<div> \
		<img :src="img"> \
		<div class="movie_name">{{name}}</div> \
		<div class="movie_des">{{description}}</div> \
	  </div>'
})
//创建根实例
var vm = new Vue({
	el:'#example',
	data: {
        imgUrl: '3.jpg',
		name: '我是传奇',
		description: '末世科幻动作电影'
    }
})
</script>


</body>

</html>



